<template>
 <view class="shopping pagebg">
   <view class="title-index">购物车</view>
   <!-- 上边ul li 购物车 -->
   <cartList></cartList>   
   <cartList></cartList>   
   <cartList></cartList>   
   
   <!-- 下边结算 -->
   <view class="content-index">
         <view class="text-my">
           <text>总价格</text>
           <text>￥60</text>
         </view>
         <view class="text-my">
           <text>运费</text>
           <text>￥10</text>
         </view>
         <view class="text-my">
           <text>实付</text>
           <text>￥70</text>
         </view>
   </view>
   
   
   <!-- 结算按钮 -->
   <button class='button' @click="buttonOrderForm">结算</button>
 </view>
   
</template>

<script setup>
  import cartList from '../../components/cartList/index'
  // 跳转到结算页面
  const buttonOrderForm=()=>{
    uni.navigateTo({
      url:"/pages/orderForm/index"
    })
  }
</script>

<style scoped lang="scss">
  .shopping{
    .button{
      position: absolute;
      bottom: 5%;
      margin: 0 14rpx;
      width: 723rpx;
      height: 111.04rpx;
      opacity: 1;
      border-radius: 20rpx;
      background: linear-gradient(259.67deg, rgba(229, 69, 0, 0.81) 36.98%, rgba(255, 92, 0, 0.79) 57.29%, rgba(255, 153, 33, 1) 92.71%), rgba(254, 120, 37, 1);
      box-shadow: 1rpx 8rpx 17rpx  rgba(35, 35, 35, 0.04), 2rpx 16rpx 21rpx  rgba(35, 35, 35, 0.04);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .title-index{
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translate(-50%);
      font-size: 60rpx;
      font-weight: 700;
    }
      // 结算
    .content-index{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      position: absolute;
      top: 70%;
      margin: 0 14rpx;
      width: 723rpx;
      height: 222.07rpx;
      opacity: 1;
      border-radius: 16rpx;
      background: rgba(255, 255, 255, 1);
      box-shadow: 1rpx 8rpx 17rpx  rgba(35, 35, 35, 0.04), 2rpx 16rpx 21rpx  rgba(35, 35, 35, 0.04);
       .text-my{
         display: flex;
         justify-content: space-around;
         font-size: 36rpx;
         font-weight: 700;
       }
    }
  }
</style>